<template>
  <div>
    <router-view></router-view>

    <ul class="tab-bar">
      <router-link to="/tab/index" tag="li" active-class="avtive">首页</router-link>
      <router-link to="/tab/category" tag="li" active-class="avtive">分类</router-link>
      <router-link to="/tab/cart" tag="li" active-class="avtive">购物车</router-link>

      <!-- 相对路径写法-->
      <router-link to="user" tag="li" active-class="avtive">我的</router-link>
      <!-- <li class="tab-bar-item">分类</li>
            <li class="tab-bar-item">购物车</li>
            <li class="tab-bar-item">我的</li>
      -->
    </ul>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  display: flex;
  background-color: #fff;
  box-shadow: 0 -1px 1px rgba(100, 100, 100, .2);

  li {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }  

  .active {
    color: skyblue;
  }
}

</style>
